<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>01放大镜</title>
	<link rel="stylesheet" href="style/style.css">
	
</head>

<body>
	<!-- 左侧放大镜容器 -->
	<div class="container">
		<div class="small"> 
			<!-- 贴膜 -->
			<div class="wrap"></div>
			<!-- 左侧放大镜图片 -->
			<img src="https://img.zcool.cn/community/0171405f00a991a801215aa006d96b.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
			<!-- 小盒子 -->
			<span class="grayBox"></span>	
		</div>
		<!-- 底切换的图片 -->
		<div class="choice-btn">
				<img src="https://img.zcool.cn/community/0171405f00a991a801215aa006d96b.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
				<img src="https://img.zcool.cn/community/01f9d55efda3d5a8012066216f132c.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
		</div>
	</div>
	<!-- 大图容器 -->
	<div class="big">
		<!-- 大图图片 -->
		<img src="https://img.zcool.cn/community/0171405f00a991a801215aa006d96b.jpg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
	</div>
</body>
	<script> 
		function Magnifier() {
			this.square = document.querySelector(".grayBox");
			// 正方形小盒子
			this.small = document.querySelector(".small");
			// 小盒子容器
			this.small_img = document.querySelector(".small img")
			// 小图片
			this.big = document.querySelector(".big");
		// 大盒子容器
			this.big_img = document.querySelector(".big img")
			// 大图片
			this.index = 0;
			// 找到图片按钮
			this.btns = document.querySelectorAll(".choice-btn img");
			this.square_size = {
				width: parseInt(getComputedStyle(this.square).width),
				height: parseInt(getComputedStyle(this.square).height),
			}
			// 获取小盒子的宽高
			this.small_size = {
				width: this.small.offsetWidth,
				height: this.small.offsetHeight,
			}
			// 获取大盒子的宽高
			this.big_size = {
				width: parseInt(getComputedStyle(this.big).width),
				height: parseInt(getComputedStyle(this.big).height),
			}
			// 获取大图片的宽高
			this.big_img_size = {
				width: parseInt(getComputedStyle(this.big_img).width),
				height: parseInt(getComputedStyle(this.big_img).height),
			}
			this.bindEvent();

		}
		// 元素的显示和隐藏
		Magnifier.prototype.bindEvent = function () {
			var self = this;
			// 鼠标移入时
			this.small.onmouseover = function () {
				self.square.style.display = "block";
				self.big.style.display = "block";
			}
			// 鼠标移出时
			this.small.onmouseout = function () {
				self.square.style.display = "none";
				self.big.style.display = "none";
			}
			// 鼠标运动
			this.small.onmousemove = function (evt) {
				// 边界值的检测，防止元素超出设定范围
				var e = evt || event;
				// 兼容
				var _left = e.offsetX - 50;
				// 左边的距离
				var _top = e.offsetY - 50;
				// 上班的距离
				if (_left < 0) {
					_left = 0;
				}
				if (_top < 0) {
					_top = 0;
				}
				// self.square.style.left=e.offsetX-50+"px";
				// self.square.style.top=e.offsetY-50+"px";
				// 容器的宽度
				var max_left = self.small_size.width - self.square_size.width - 8;
				if (_left > max_left) {
					_left = max_left;
				}
				// 容器的高度
				var max_top = self.small_size.height - self.square_size.height - 8;
				if (_top > max_top) {
					_top = max_top;
				}
				self.square.style.left = _left + "px";
				self.square.style.top = _top + "px";
				//  计算位移的百分比
				var prop_left = (_left / max_left).toFixed(2);
				var prop_top = (_top / max_top).toFixed(2);

				// 大盒子的最大移动距离
				var big_box_max_left = self.big_img_size.width - self.big_size.width;
				var big_box_max_top = self.big_img_size.height - self.big_size.height;
				// 计算出距离
				self.big_img.style.left = -big_box_max_left * prop_left + "px";
				self.big_img.style.top = -big_box_max_top * prop_top + "px";
			}
			// 鼠标移入入时切换图片
			for (var i = 0; i < this.btns.length; i++) {
				this.btns[i].index = i;
				this.btns[i].onmouseover = function () {
					self.index = this.index;
					// 改变图片的src
					self.small_img.src = this.src;
					self.big_img.src = this.src;
				}
			}
		}
		var mf = new Magnifier();
	</script>  
</html>